<template>
	<view>
		<view class="mask" :class="{'maskShow' : showPicker}" @click="hide" @click.stop.prevent @touchmove.stop.prevent
			catchtouchmove="true"></view>
		<view class="cpicker-content" :class="{'cpickerShow' : showPicker}" id="addressId">
			<!-- 优惠券页面，仿mt -->
			<view class="city-head" @click.stop.prevent @touchmove.stop.prevent catchtouchmove="true">
				<view style="display: flex;justify-content: space-between;padding: 0 30rpx;">
					<!-- <view @tap.stop="resetAll" class="city-head-all">全部</view> -->
					<view></view>
					<view class="city-head-title">{{headtitle}}</view>
					<image src="/static/store/close-icon.png" @tap.stop="hide('self')" class="close-icon-size"></image>
				</view>
				<!-- <text v-if="rightIcon" class="rightIcon iconfont icon-quxiao" style="border: 1rpx solid red;" @click="hide('self')"></text> -->
				<!-- <image src="/static/close-popup.png" @tap.stop="hide('self')" class="rightIcon"></image> -->
			</view>
			<scroll-view id="nav-bar" class="nav-bar" scroll-x="true" scroll-with-animation="true"
				:scroll-left="scrollLeft">
				<view v-for="(item,index) in tabbars" class="nav-item" :key="index" :id="'tab'+index"
					@click="changeTab(index)" :class="{'current': index === tabCurrentIndex}"><text
						class="nav-bar-title">{{item.text}}</text></view>
			</scroll-view>
			<view style="position: relative;height: 800rpx" id="address">
				<view class="city_content">
					<scroll-view class="panel-scroll-box" :scroll-y="enableScroll" :cscrollTop="scrollTop"
						:current="tabCurrentIndex" :scroll-top="scrollTop"  :scroll-into-view="toView" scroll-with-animation="true">
						<view v-for="(py, pyIndex) in pinyinList" :key="py" :id="'pyIndex_'+pyIndex">
							<view
								style="line-height: 84rpx; box-sizing: border-box; padding: 0 59rpx;font-size: 28rpx; font-weight: bold;border-bottom: 1rpx solid rgba(151, 151, 151, 0.28);">
								{{ py }}
							</view>
							<block v-for="(item,index) in showData[py]" :key="index">
								<view class="flex-row-c-c" @click="changCity(tabCurrentIndex,item)">
									<!-- <icon type="success_no_circle" v-if="tabbars[tabCurrentIndex].value==item.value"
										:id="'show'+tabCurrentIndex" class="ischeck" size="14" color="#00B1B7"></icon> -->
									<text
										:class="tabbars[tabCurrentIndex].value==item.value ? 'city-text city-text-active'  : 'city-text' ">{{item.text}}</text>
								</view>
							</block>
						</view>

					</scroll-view>
				</view>
				<view class="address-py-list" :style="'margin-top:-'+ (rightHeight/2) + 'rpx;'">
					<view v-for="(item, index) in pinyinList" :key="item" @tap.stop="scrollHandle(index)">{{ item }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import pinyinUtils from '../../utils/pinyinUtils.js';
	let windowWidth = 0,
		scrollTimer = false,
		tabBar;
	export default {
		name: 'UniCityNvue',
		props: {
			headtitle: { // 使用多少个tab
				type: String,
				default: ''
			},
			pickerSize: { // 使用多少个tab
				type: [String, Number],
				default: 3
			},
			data: { // 默认的省市区id，如果不使用id的情况下则为[]；
				type: Array,
				default: function() {
					return [];
				},
			},
			provincedata: { // 默认的省市区id，如果不使用id的情况下则为[]；
				type: Array,
				default: function() {
					return [];
				},
			}
		},
		data() {
			return {
				isFirst: true,
				rightIcon: true,
				scrollLeft: 500, //顶部选项卡左滑距离
				scrollTop: 0,
				enableScroll: true,
				tabCurrentIndex: 0, //当前选项卡索引
				tabbars: this.provincedata,
				showData: this.data,
				pickersize: this.pickerSize,
				showPicker: false,
				pinyinList: [],
				rightHeight: 0,
				windowTop: 0,
				toView: ''
			}
		},
		watch: {
			showPicker() {
				if (this.isFirst) {
					this.isFirst = false;
				}
			},
			provincedata(val) {
				this.tabbars = val;
			}
		},
		onLoad() {
			this.findAllProvinceList()
			//获取手机系统信息
			const systemInfo = uni.getSystemInfoSync();
			console.log("[systemInfo]", systemInfo)
			// #ifdef H5 || APP-PLUS || MP-ALIPAY
			this.windowTop = systemInfo.windowTop
			// #endif
		},
		methods: {
			scrollHandle(index) {
				this.toView = 'pyIndex_'+index
				// const query = uni.createSelectorQuery().in(this);
				// uni.createSelectorQuery().select("#addressId").boundingClientRect(data => {
				// 	console.log(data)
				// 	uni.createSelectorQuery().select("#" + index).boundingClientRect((res) => {
				// 		console.log(res)
				// 		uni.pageScrollTo({
				// 			duration: 100,
				// 			scrollTop: 480, //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
				// 		})
				// 	}).exec()
				// }).exec();
				
			},

			findAllProvinceList() {
				let that = this;
				that.api.findProvinceList().then(res => {

				})
			},

			show() {
				this.showPicker = true;
				windowWidth = uni.getSystemInfoSync().windowWidth;
				if (this.provincedata.length > 0 && this.provincedata.length < this.pickerSize && this.isFirst && this
					.provincedata[this.provincedata.length - 1].value != "") {
					this.showData = this.findSameId(this.data, this.tabbars[this.provincedata.length], this.tabbars[this
						.provincedata.length - 1]);
					var current = {
						text: "请选择",
						value: "",
					}
					this.tabbars.push(current);
					this.tabCurrentIndex = this.provincedata.length - 1;
					this.scrollTop = 0;
					this.setScroll(this.tabCurrentIndex);
				} else {
					this.showData = this.findSameId(this.data, this.tabbars[this.provincedata.length - 1], this.tabbars[
						this.provincedata.length - 2]);
					this.$nextTick(() => {
						this.tabCurrentIndex = this.provincedata.length - 1;
						this.scrollTop = 0;
						this.setScroll(this.tabCurrentIndex);
					})
				}
			},
			findSameId(tree, currentTab, preTab) {
				let retNode = null;

				function deepSearch(tree, currentTab, preTab) {
					for (var i = 0; i < tree.length; i++) {
						if (tree[i].children && tree[i].children.length > 0) {
							deepSearch(tree[i].children, currentTab, preTab);
						}
						var flag = currentTab == undefined ? true : (currentTab.value === "" ? true : false);
						var value = tree[i].value + "";
						var text = tree[i].text;
						if (preTab != null && flag && preTab.text === text && preTab.value + "" === value) {
							retNode = tree[i].children;
							break;
						} else if (currentTab != null && currentTab.text === text && currentTab.value + "" === value) {
							retNode = tree;
							break;
						}
					}
				}
				deepSearch(tree, currentTab, preTab);
				var list = retNode == null ? tree : retNode;
				console.log(list)
				list = this.pinyinSort(list);
				console.log(list)
				return list;
			},

			pinyinSort(name) {
				//name数组
				name.forEach(item => {
					if (item.text == '重庆市') {
						item.pinyin = "ChongQingshi"
						item.PinyinFirst = 'C'
					} else if (item.text == '枞阳县') {
						item.pinyin = "ZongYangXian"
						item.PinyinFirst = 'Z'
					} else {
						item.pinyin = pinyinUtils.chineseToPinYin(item.text)
						var list = pinyinUtils.chineseToPinYinFirst(item.text)
						item.PinyinFirst = list.substring(0, 1)
					}
				})
				name = JSON.parse(JSON.stringify(name))
				name.sort((a, b) => a.PinyinFirst.charCodeAt(0) - b.PinyinFirst.charCodeAt(0));				//按照英文字母进行排序
				const cityList = {}
				//重新组合数组，将相同首字母的地区放到一个对象中
				name.forEach((item) => {
					const first = item.PinyinFirst; // 获取城市名称拼音首字母
					if (cityList[first]) {
						cityList[first].push(item);
					} else {
						cityList[first] = [item];
					}
				});
				this.pinyinList = Object.keys(cityList).sort()
				this.rightHeight = this.pinyinList.length * 45 + 120;
				return cityList;
			},

			hide() {
				this.showPicker = false;
			},
			
			resetAll() {
				if(this.tabbars.length > 1){
					let list = []
					list.push(this.tabbars[0])
					let current = {
						text: "请选择",
						value: ""
					}
					list.push(current)
					this.tabbars = list
				}
				this.$emit('funcvalue', "");
				this.hide();
			},
			//tab切换
			changeTab(e) {
				let index = e;
				this.setScroll(index);
				//延迟300ms,等待swiper动画结束再修改tabbar
				this.tabCurrentIndex = index;
				this.showData = this.findSameId(this.data, this.tabbars[index], index === 0 ? this.tabbars[index] : this
					.tabbars[index - 1]);
				setTimeout(() => {
					this.getScroll("show" + index);
				}, 10)
			},
			//获得元素的size
			getElSize(id) {
				return new Promise((res, rej) => {
					let el = uni.createSelectorQuery().in(this).select('#' + id);
					el.fields({
						size: true,
						scrollOffset: true,
						rect: true
					}, (data) => {
						res(data);
					}).exec();
				});
			},
			changCity(index, item) {
				if (this.tabbars[index].value != item.value) {
					this.tabbars[index].text = item.text;
					this.tabbars[index].value = item.value;
					if (index < (this.tabbars.length - 1)) {
						this.tabbars.splice(index + 1, this.tabbars.length - index - 1)
					}
					if (this.tabbars.length < this.pickersize) {
						var current = {
							text: "请选择",
							value: ""
						}
						this.showData = this.pinyinSort(item.children)
						console.log(this.showData)
						this.tabbars.push(current);
						this.tabCurrentIndex++;
						this.scrollTop = 0;
						this.setScroll(index);
					} else {
						this.$emit('funcvalue', this.tabbars);
						this.hide();
					}
				}
			},
			async setScroll(index) {
				let width = 0;
				let nowWidth = 0;
				for (let i = 0; i <= index; i++) {
					let result = await this.getElSize('tab' + i);
					width += result.width;
					if (i === index) {
						nowWidth = result.width;
					}
				}
				if ((width + nowWidth) > windowWidth) {
					this.scrollLeft = width + nowWidth;
				} else {
					this.scrollLeft = 0;
				}
			},
			getScroll(id) {
				uni.createSelectorQuery().in(this).select('.panel-scroll-box').boundingClientRect((data) => {
					uni.createSelectorQuery().in(this).select('#' + id).boundingClientRect((res) => {
						if (res != undefined && res != null && res != '') {
							this.scrollTop = res.top - data.top;
						}
					}).exec()
				}).exec();
			}
		}
	}
</script>

<style lang="scss">
	/* 优惠券面板 */
	.mask {
		visibility: hidden;
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		z-index: 1000;
		background: rgba(0, 0, 0, .6);
		opacity: 0;
		transition: all .3s ease;
	}

	.maskShow {
		visibility: visible;
		opacity: 1;
	}

	.cpicker-content {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		transition: all .3s ease;
		transform: translateY(100%);
		z-index: 3000;
		border-radius: 20rpx 20rpx 0 0;
	}

	.cpickerShow {
		transform: translateY(0);
	}

	.city-head {
		width: 750rpx;
		height: 88rpx;
		flex-direction: column;
		border-bottom-width: 1px;
		border-bottom-color: #F4F4F4;
		border-bottom-style: solid;
	}

	.city-head-title {
		font-size: 15px;
		line-height: 88rpx;
		// color: #f00;
		align-items: center;
		/* #ifndef APP-NVUE */
		text-align: center;
		/* #endif */
	}

	.rightIcon {
		position: absolute;
		right: 15px;
		top: 9px;
		font-size: 30px;
		color: #BEBEBE;
	}

	.nav-bar {
		position: relative;
		z-index: 10;
		height: 90upx;
		white-space: nowrap;
		box-shadow: 0 2upx 8upx rgba(0, 0, 0, .06);
		background-color: #fff;
	}

	.nav-bar::-webkit-scrollbar {
		display: none;
	}

	.nav-item {
		/* #ifndef APP-NVUE */
		display: inline-flex !important;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex-direction: row !important;
		/* #endif */
		width: 170rpx;
		padding: 7px 0px;
		line-height: 26px;
		align-items: center;
		justify-content: center;
		color: #303133;
		position: relative;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.nav-bar-title {
		font-size: 24rpx;
	}

	.current {
		// border-bottom-width: 4rpx;
		// border-bottom-style: solid;
		color: #E02020;
	}

	.current:after {
		width: 50%;
	}

	.panel-scroll-box {
		height: 760rpx;
		margin-top: 8px;
	}

	.flex-row-c-c {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex-direction: row;
		/* #endif */
		line-height: 84rpx;
		box-sizing: border-box;
		padding: 0 59rpx;
		border-bottom: 1rpx solid rgba(151, 151, 151, 0.28);
		color: #333;
	}

	.city-text {
		/* #ifdef APP-NVUE */
		flex-direction: row;
		/* #endif */
		height: 35px;
		line-height: 35px;
		font-size: 13px;
	}

	.city-text-active {
		color: #E02020;
	}

	.hide {
		opacity: 0;
	}

	.ischeck {
		/* #ifndef APP-NVUE */
		display: inline-flex !important;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex-direction: column;
		/* #endif */
		margin-right: 5px;
		vertical-align: middle;
	}

	.close-icon-size {
		width: 32rpx;
		height: 32rpx;
		margin-top: 29rpx;
	}
	
	.city-head-all{
		font-size: 28rpx;
		width: 100rpx;
		text-align: left;
		color: #43A73C;
		line-height: 50rpx;
		margin-top: 20rpx;
	}

	.address-py-list {
		position: absolute;
		right: 15rpx;
		top: 50%;
		width: 32rpx;
		box-sizing: border-box;
		padding: 60rpx 0;
		text-align: center;
		background-color: #EDEDED;
		border-radius: 16rpx;
		font-size: 24rpx;
		color: #777;
		line-height: 45rpx;
	}
</style>
